<template>
  <div class="nav">
    <div class="pc-nav">
      <!-- 导航栏 -->
      <nav class="nav-bar">
        <div class="nav-content">
          <div class="logo" @click="handleClickLogo">
            <img src="@/assets/images/bounty/logo1.png" style="width:200px;" alt="logo" />
          </div>
          <div class="nav-links">
            <div class="nav-dropdown" @mouseenter="openDropdown('products')" @mouseleave="closeDropdown">
              <a href="#" class="nav-link">Products ▾</a>
              <!--  -->
              <div class="dropdown-menu products-dropdown" v-if="activeDropdown === 'products'">
                <!-- Products 子导航内容 -->
                <div class="products-content dropdown-content">
                  <!-- 左侧一级分类 -->
                  <div class="product-categories">
                    <ul class="category-list">
                      <li class="category-item" v-for="item in productCategoryTree" :key="item.id"
                        @mouseenter="openProductChildDropdown(item.id)">
                        <a :href="`/category?categoryId=${item.id}`" class="category-link">{{ item.name }}</a>
                        <div class="subcategories" v-if="activeProductCategoryDropdown === item.id">
                          <div class="subcategory-content">
                            <div class="subcategory-grid">
                              <div class="subcategory-column">
                                <h4>{{ item.name }}</h4>
                                <ul>
                                  <li v-for="subItem in item.children" :key="subItem.id"><a
                                      :href="`/category?categoryId=${subItem.id}`" class="subcategory-link">
                                      {{ subItem.name }}
                                    </a>
                                  </li>
                                  <li><a :href="`/category?categoryId=${item.id}`" class="view-all">View all {{
                                    item.name }}</a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="category-item view-all-category">
                        <a href="/allProduct" class="category-link view-all-btn">View All Products</a>
                      </li>
                    </ul>
                  </div>
                  <div class="health-promo">
                    <div class="promo-box" @click="toAllProduct()">
                      <!-- <h3>Discover Our NEW Vitality Hub</h3> -->
                      <h2>Discover Our NEW Vitality Hub</h2>
                      <p>Explore our collection of antioxidant-rich products designed to help you refresh, renew, and
                        radiate from the inside out.</p>
                      <button class="explore-btn">Explore Vitality Essentials →</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-dropdown" @mouseenter="openDropdown('health')" @mouseleave="closeDropdown">
              <a href="#" class="nav-link">Give & Share ▾</a>
              <div class="dropdown-menu health-dropdown" v-if="activeDropdown === 'health'">
                <!-- Health Benefits 子导航内容 -->
                <div class="health-content dropdown-content">
                  <div class="health-benefits-list">
                    <ul style="display: grid;grid-template-columns: 1fr 1fr;gap: 10px">
                      <li @click="openCharityChildDropdown(item.id)" v-for="item in charityList" :key="item.id">
                        <a href="#" class="benefit-link">
                          <img class="benefit-icon" src="../../assets/images/bounty/icon.png" alt="">
                          <span class="benefit-title">{{ item.title }}</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class="health-promo">
                    <div class="promo-box" @click="toAllProduct()">
                      <!-- <h3>Discover Our NEW Vitality Hub</h3> -->
                      <h2>Discover Our NEW Vitality Hub</h2>
                      <p>Explore our collection of antioxidant-rich products designed to help you refresh, renew, and
                        radiate from the inside out.
                      </p>
                      <button class="explore-btn">Explore Vitality Essentials →</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-dropdown" @mouseenter="openDropdown('learn')" @mouseleave="closeDropdown">
              <a href="#" class="nav-link">Learn ▾</a>
              <div class="dropdown-menu learn-dropdown" v-if="activeDropdown === 'learn'">
                <!-- Learn 子导航内容 -->
                <div class="learn-content">
                  <!-- 左侧导航链接 -->
                  <div class="learn-nav">
                    <h3>Resources For You</h3>
                    <ul>
                      <li><a href="/blogList">Harvest Gain Blog</a></li>
                      <li><a href="/womensWellness">Women's Wellness Hub</a></li>
                    </ul>
                    <!-- <button class="view-all-btn">View All Resources</button> -->
                  </div>

                  <!-- 右侧内容卡片 -->
                  <div class="learn-cards">
                    <div class="card">
                      <div class="card-image">
                        <div class="new-badge">NEW!</div>
                        <img src="../../assets/images/bounty/blueberry.jpeg" alt="Hair Growth Product"
                          style="width:100%;height:200px;object-fit:cover" />
                      </div>
                      <div class="card-content">
                        <p>See How Selenium Supports Cellular Protection and Heal thyMetabolism with Our Advanced
                          Antioxidant Formula
                        </p>
                      </div>
                    </div>

                    <div class="card">
                      <div class="card-image">
                        <img src="../../assets/images/bounty/542d66367f17ade9020748a21aae06d7.png"
                          alt="Susan G. Komen Partnership" style="width:100%;height:200px;object-fit:cover" />
                      </div>
                      <h2>Harvest Gain Charity Initiative</h2>
                      <div class="card-content">
                        <p>At Harvest Gain, we believe that true growth comes from giving back.
                          For every product sold, 17.4% of the proceeds will be donated to charitable causes, supporting
                          health, nutrition, and community well-being around the world.
                          Join us in making every purchase a meaningful contribution to a better future.
                        </p>
                        <button class="learn-more-btn">Learn More &gt;</button>
                        <!-- <button class="pink-learn-btn">Learn More</button> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-dropdown" @mouseenter="openDropdown('about')" @mouseleave="closeDropdown">
              <a href="/aboutUs" class="nav-link">About Us ▾</a>
            </div>
          </div>
          <div class="nav-actions">
            <button class="where-to-buy" @click="toDownloadCenter">Download Center</button>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
import {
  selectProductCategoryTree,
  selectCharityList,
  selectBlogCategoryList
} from "@/config/api";
export default {
  name: "navgetion",
  data() {
    return {
      activeDropdown: null,
      activeProductCategoryDropdown: null,
      dropdownTimer: null,
      productCategoryTree: [],
      charityCategoryTree: [],
      blogCategoryList: []
    };
  },
  created() {
    selectProductCategoryTree().then(res => {
      if (res.code === 200) {
        this.productCategoryTree = res.data;
      }
    });
    selectCharityList().then(res => {
      if (res.code === 200) {
        this.charityList = res.data;
      }
    });
    selectBlogCategoryList({
      pageNum: 1,
      pageSize: 10
    }).then(res => {
      if (res.code === 200) {
        this.blogCategoryList = res.data;
      }
    });
  },

  computed: {
  },
  methods: {
    openDropdown(dropdown) {
      // 清除之前的定时器
      if (this.dropdownTimer) {
        clearTimeout(this.dropdownTimer);
      }
      this.activeDropdown = dropdown;
    },

    openProductChildDropdown(id) {
      this.activeProductCategoryDropdown = id;
    },
    toAllProduct() {
      this.$router.push({
        path: "/allProduct",
      });
    },
    closeDropdown() {
      // 添加延迟，允许用户在移动到子菜单时不会立即关闭
      this.dropdownTimer = setTimeout(() => {
        this.activeDropdown = null;
      }, 200);
    },
    handleClickLogo() {
      this.$router.push({
        path: '/'
      });
    },
    openCharityChildDropdown(id) {
      this.$router.push({ path: "/charitableOrganizationDetail", query: { id: id } });
    },
    toBlogList() {
      this.$route.push({ path: '/blogList' })
    },
    toAboutUs() {
      this.$route.push({ path: '/aboutUs' })
    },
    toDownloadCenter() {
      this.$router.push({ path: '/download' })
    }



  },
};
</script>

<style scoped lang="less">
/* 导航栏样式 */
.nav-bar {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 72px;
}

.nav-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.logo {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  font-family: 'Georgia', serif;
  letter-spacing: 0.05em;
  height: 72px;
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-dropdown {
  /* position: relative; */
  height: 72px;
  display: flex;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: #2E453B;
  font-weight: bold;
  font-size: 16px;
  padding: 0.5rem 0;
  display: block;
  transition: color 0.3s;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-link:hover {
  color: #2E453B;
}

/* 活跃的导航项下划线 */
.nav-dropdown:hover .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #d2e38f;
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  width: 100% !important;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 999;
  border-top: 3px solid #d2e38f;
  margin-top: 1px;
  white-space: nowrap;
}

/* Products下拉菜单全屏样式 */
.products-dropdown {
  width: 100% !important;
  left: 0;
  right: 0;
}

.products-content {
  display: flex;
  min-height: 300px;
  max-width: 100%;
  justify-content: space-between;
  padding: 1rem 3rem;
}

.product-categories {
  width: 300px;
  /* background-color: #f8f9fa; */
  border-right: 1px solid #e9ecef;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  /* position: relative; */
}

.category-link {
  display: block;
  padding: 12px 16px;
  color: #809e2c;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.category-link:hover,
.category-link.active {
  background-color: rgb(239, 230, 214);
  font-weight: bold;
}

.view-all-category .category-link {
  background-color: #d2e38f;
  color: #2E453B;
  font-weight: bold;
  text-align: center;
  margin: 16px;
  border-radius: 4px;
  border-left: none;
  border-radius: 50px;
}

.view-all-category .category-link:hover {
  background-color: #b8d46c;
}

.products-main-content {
  flex: 1;
  padding: 1.5rem 2rem;
}

.products-promo {
  width: 300px;
  padding: 1.5rem;
}

.subcategory-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.subcategory-grid {
  display: flex;
  gap: 2rem;
}

.subcategory-column {
  min-width: 180px;
}

.subcategory-column h4 {
  color: #2E453B;
  margin-bottom: 20px;
  font-size: 18px;
}

.subcategory-column ul {
  list-style: none;
  padding: 0;
}

.subcategory-column li {
  margin-bottom: 0.75rem;
}

.subcategory-column a {
  color: #525252;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.28s;
  font-size: 14px;
}

.subcategory-column a:hover {
  color: #809e2c;
}

.subcategory-column .view-all {
  color: #809e2c;
  font-weight: bold;
  margin-top: 1rem;
  font-size: 17px;
  display: inline-block;
}

/* 子分类下拉菜单（默认隐藏，由JavaScript控制显示） */
.subcategories {
  display: block;
  position: absolute;
  left: 335px;
  top: 0;
  bottom: 0;
  background-color: #fff;
  padding: 1.5rem 2rem;
  pointer-events: auto;
  /* 允许内部点击 */
}

/* 但要让里面的链接可以点击，所以给子元素恢复 */
.category-item .subcategories * {
  pointer-events: auto;
}

.category-item:hover .subcategories {
  display: block;
}

.category-list .category-item:first-child .subcategories:first-child {
  display: block;
}

/* Learn下拉菜单样式 */
.learn-dropdown {
  width: 100% !important;
  left: 0;
  right: 0;
  padding: 2rem;
}

.dropdown-content {
  position: relative;
}

.dropdown-content,
.learn-content {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  gap: 2rem;
}

.learn-nav {
  width: 500px;
}

.learn-nav h3 {
  color: #333;
  margin-bottom: 1.5rem;
  font-size: 18px;
  font-weight: bold;
}

.learn-nav ul {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.learn-nav li {
  margin-bottom: 1.2rem;
}

.learn-nav a {
  color: rgb(70, 118, 69);
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s;
}

.learn-nav a:hover {
  color: #809e2c;
}

.view-all-btn {
  margin-top: 30px;
  background-color: #809e2c;
  color: white;
  border: none;
  padding: 1rem 1.5rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 25px;
  transition: background-color 0.3s;
  font-size: 16px;
  /* width: 100%; */
}

.view-all-btn:hover {
  background-color: #6b8726;
}

/* 右侧卡片区域 */
.learn-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  flex: 1;
  min-width: 0;
}

.card {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.card h2 {
  font-size: 20px;
  margin-top: 6px;
  color: #000;
  font-weight: bold;
  padding-left: 1.5rem;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-image {
  position: relative;
  /* height: 200px; */
  overflow: hidden;
}

.new-badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff0066;
  color: white;
  padding: 0.5rem 1rem;
  font-weight: bold;
  font-size: 12px;
  z-index: 1;
}

.card-content {
  padding: 5px 1.5rem 1.5rem 1.5rem;
}

.card-content h2 {
  color: rgb(70, 118, 69);
  font-weight: bold;
}

.card-content p {
  color: rgb(70, 118, 69);
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0.5rem;
  white-space: wrap;
}

.learn-more-btn {
  background: none;
  border: none;
  color: rgb(70, 118, 69);
  font-weight: bold;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  margin-bottom: 1rem;
}


.pink-learn-btn:hover {
  background-color: #cc0052;
}

.dropdown-content {
  display: flex;
  flex-wrap: wrap;
  padding: 1.5rem 2rem;
  min-height: 300px;
}

.dropdown-column {
  flex: 1;
  min-width: 200px;
  padding: 0 1rem;
}

.dropdown-column h4 {
  color: #2E453B;
  margin-bottom: 1rem;
  font-size: 16px;
}

.dropdown-column ul {
  list-style: none;
  padding: 0;
}

.dropdown-column li {
  margin-bottom: 0.75rem;
}

.dropdown-column a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 14px;
  display: block;
  padding: 0.25rem 0;
}

.dropdown-column a:hover {
  color: #2E453B;
}

/* 健康益处特殊样式 - 单列显示 */
.health-dropdown {
  width: 600px;
}

.health-content {
  display: flex;
  padding: 1.5rem 2.5rem 1.5rem 4rem;
}

.health-benefits-list {
  flex: 1;
  padding-right: 2rem;
}

.health-promo {
  /* flex: 1; */
  width: 400px;
}

.benefit-link {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  color: #666;
  font-size: 15px;
  padding: 0.5rem 0;
  transition: color 0.2s;
}

.benefit-link:hover {
  color: #2E453B;
  text-decoration: none;
}

.benefit-icon {
  width: 20px;
  height: 20px;
  object-fit: cover;
}

.benefit-title {
  color: #809e2c;
  font-size: 16px;
  font-weight: 700;
}

/* 促销专栏样式 */
.promo-box {
  background-color: #2E453B;
  color: white;
  padding: 2rem;
  border-radius: 4px;
  /* height: 100%; */
  white-space: normal;
}

.promo-box h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

.promo-box h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.promo-box p {
  margin-bottom: 1.5rem;
  font-size: 14px;
  line-height: 1.6;
}

.explore-btn {
  background-color: #d2e38f;
  color: #2E453B;
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 25px;
  transition: background-color 0.3s;
  font-size: 14px;
}

.explore-btn:hover {
  background-color: #b8d46c;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.search-icon {
  font-size: 24px;
  cursor: pointer;
  color: #2E453B;
}

.where-to-buy {
  background-color: #d2e38f;
  color: #27463a;
  border: 1px solid #D2E38F;
  transition: all .2s ease-in-out;
  font-size: 1rem;
  padding: 0px 30px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50px;
  height: 45px;
}

.where-to-buy:hover {
  background-color: #ffffff;
}

/* 确保下拉菜单在离开父元素时仍然可以访问 */
.dropdown-menu:hover {
  display: block;
}
</style>
